<template>
  <div class="content">
    <div>
      <van-nav-bar title="已扫条码" class="nav-bar-style" left-arrow @click-left="onClickLeft">
        <template #title>
          <div class="nav-bar-title-style">已扫条码</div>
        </template>
        <template #left>
          <van-icon size="30" name="arrow-left" color="#FFF" />
        </template>
      </van-nav-bar>
    </div>

    <div v-for="(scanInfoItem,index) in scanedInfos" :key="index">
      <div v-if="scanedInfos.length >0" class="storageTitleDivStyle">
        <img src="@/assets/ic_left_blue_signal.png" width="5px" height="22px" />
        <span class="storageName">{{scanInfoItem.storageLocation}}</span>
      </div>

      <div v-for="(barcodeItem,barCodesIndex) in scanInfoItem.qrCodes" :key="barCodesIndex">
        <div class="barCodesDivStyle">
          <span class="barcodeTitle">条形码</span>
          <span class="barcodeContent">{{barcodeItem}}</span>
        </div>
      </div>
    </div>

    <!-- 暂无数据 -->
    <div v-if="scanedInfos.length == 0" class="noDataCont">
      <div class="imgs">
        <img src="@/assets/img_no-data.png" alt="暂无数据" class="nod" />
      </div>
      <div class="noDataTitle">暂无数据</div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import api from "@/utils/api";
import http from "@/utils/request.js";
import router from "@/router";
import { List } from "vant";
import { NavBar } from "vant";
import { Cell, CellGroup } from "vant";

Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(List);
Vue.use(NavBar);

export default {
  data() {
    return {
      scanedInfos: [],
      isHasScanedIsNull: true
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push({
        path: "/inStorageMaterialDetail",
        query: {
          inStockId: this.$route.query.inStockId,
        }
      });
    },

    checkHasScanedIsNull() {
      let result = true;
      /*
        {
          "storageMappingId": 3786063446785654784,
          "storageMappingName": "33/库区9/货架9",
          "barCodes": ["3785395875354771457"]
        },
      */
      this.scanedInfos.forEach(info => {
        if (info.barCodes.length > 0) {
          result = false;
        }
      });
      return result;
    }
  },
  created() {
    var params = {
      inStockId: this.$route.query.inStockId,
    }
    http.fetchGet(api.LimsGetInStockQrCodeDetail, params, "正在入库中...").then(response => {
        if(response.code === 1){
          this.scanedInfos = response.data
          console.log(this.scanedInfos)
        }else if(response.code === 2){
          Dialog.alert({
            message: response.message
          });
        }
    }).catch(err => {
        Dialog.alert({
          message: err
        });
    });
    // console.log(JSON.parse(this.$route.query.inStorageInfos));
    // this.scanedInfos = JSON.parse(this.$route.query.inStorageInfos);

    // /*
    //   materialId: this.materailInfo.id,
    //       storageMappingId: storeShelfId,
    //       storageMappingName: currentSelectLocationText,
    //       barCodes: []
    // */

    // this.scanedInfos.forEach(scanedInfo => {
    //   /*
    //     {
    //       "storageMappingId": 3786063446785654784,
    //       "storageMappingName": "33/库区9/货架9",
    //       "barCodes": ["3785395875354771457"]
    //     },
    //   */
    //   console.log("--仓库名---" + scanedInfo.storageMappingName);
    //   let scanedCodes = scanedInfo.barCodes;
    //   console.log("---条码列表是--" + scanedCodes[0]);
    // });
  }
};
</script>

<style scoped>
.cellTitleStyle {
  display: flex;
  justify-content: flex-start;
  font-size: 22px;
}

.contLi {
  padding: 8px;
  box-sizing: border-box;
  display: flex;
  font-size: 20px;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  margin-top: 10px;
}
.storeLiStyle {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  margin-bottom: 20px;
  align-items: center;
  align-self: center;
}
.storeLeft {
  font-weight: bold;
  font-size: 22px;
}

.storeRight {
  font: bold;
  margin-left: 40px;
  font-weight: bold;
  font-size: 22px;
}

.left {
  width: 90%;
  text-align: left;
}
.btn {
  height: 36px;
  line-height: 36px;
  min-width: 100px;
  border-radius: 50px;
}
.leftLi {
  display: flex;
  line-height: 37px;
}

.van-button--primary {
  background-color: rgba(71, 124, 236, 1);
}
.nar-bar-parent-style {
  display: flex;
  justify-content: space-between;
}
.nav-bar-title-style {
  font-size: 22px;
  margin-right: 62px;
  text-align: center;
  font-family: PingFangSC-Regular;
  color: #fff;
}

.nav-bar-style {
  /* width: 64px;
  height: 42px; */
  font-size: 30px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(71, 124, 236, 1);
  background: #2e71ff;
}
.storageTitleDivStyle {
  margin-top: 30px;
  margin-left: 15px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.storageName {
  margin-left: 10px;
  width: auto;
  word-break: keep-all;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #333333;
}

.barCodesDivStyle {
  margin-top: 10px;
  margin-left: 25px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.barcodeTitle {
  min-width: 15%;
  color: #999999;
  width: auto;
  word-break: keep-all;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 24px;
}
.barcodeContent {
  width: auto;
  word-break: keep-all;
  white-space: nowrap;
  overflow: hidden;
  margin-left: 20px;
  text-overflow: ellipsis;
  color: #333333;
  font-size: 24px;
}
/* 暂无数据 */
.noDataTitle {
  color: #666666;
  font-size: 20px;
  margin-top: 10px;
}
.noDataCont {
  height: 274px;
  /* width: 100%; */
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -137px;
  transform: translate(-50%);
}
.nod {
  width: 100%;
  height: 100%;
}
</style>
